<template>
  <div class="wp">
      <p class="phonerighttop">我的订单</p>
      <ul class="Omain">
          <template v-for="(item,index) in txt">
              <li   :key="index" class="Omain1" v-if="index==0" :class="{'active':flag[index]}" >
              <div  @click="toall(index)">
                  {{item}}
              </div>
            </li>
          </template>
          <template v-for="(item,index) in txt">
              <li class="Omain3" :key="index" v-if="index>0" >
                  <i class="Omain2"></i>
              <div class="Omain1" @click="toall(index)" :class="{'active':flag[index]}">
                  {{item}}
              </div>
            </li>
          </template>
      </ul>
      <div class="Obot">
          <Order1  v-if="flag[0]"/>
      </div>
    </div>
</template>

<script>
import Order1 from './Order1';
export default {
    name:'Order',
    data() {
        return {
            txt:['全部','待付款','待发货','待收货','待评价','退款/售后','已完成/关闭'],
            flag:[],
        }
    },
    components:{
        Order1,
    },
    methods:{
        toall(v) {
            for (let i = 0; i < this.txt.length; i++) {
            this.$set(this.flag,i,false);
            }
            this.$set(this.flag,v,true);
        }
    },
    created(){
        for (let i = 0; i < this.txt.length; i++) {
            this.$set(this.flag,i,false);
        }
        this.$set(this.flag,0,true);
    }
}
</script>

<style scoped>
.phonerighttop {
    height: 56px;
    border-bottom: 1px solid #e7e7e7;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    color: #323333;
    font-size: 18px;
}
.Omain {
    display: flex;
    margin-left: 20px;
    margin-top: 20px;
}
.Omain1 {
   padding: 7px 15px;
   margin-right: 22px;
   font-size: 12px;
   color: #666666;
   cursor: pointer;
}
.Omain2 {
    display: inline-block;
    height: 17px;
    width: 0;
    border-left: 1px solid #666666;
    margin-right: 22px;
    margin-top: 7px;
}
.Omain3 {
    display: flex;
}
.active {
    background: #f08200;
    color: #fff;
}
.Obot {
    margin-left: 20px;
}
</style>